<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://cdn.bootcss.com/vue/2.1.10/vue.js"></script>
</head>
<body>
    <div id="app">
        <div>
            <label>姓名：</label>
            <input type="text" v-model="newPerson.name"/>
        </div>
        <div>
            <label>年龄：</label>
            <input type="text"  v-model="newPerson.age"/>
        </div>
        <div>
            <label>Sex：</label>
            <select v-model="newPerson.sex">
                <option value="Male">Male</option>
                <option value="Female">Female</option>
            </select>
        </div>
        <div>
            <button v-on:click="create">
                create
            </button>
        </div>
        <table style="border:1px solid;">
            <th>name</th>
            <th>age</th>
            <th>sex</th>
            <th>op</th>

            <tr v-for="(peo,index) in people">
                <td>{{peo.name}}</td>
                <td>{{peo.age}}</td>
                <td>{{peo.sex}}</td>
                <td>
                    <button v-on:click="deletePeo(index)">delete</button>
                </td>
            </tr>
        </table>
    </div>
    <script>
        var vm = new Vue({
            el : "#app",
            data : {
                newPerson : {
                    name : '',
                    age : 0,
                    sex : 'Male'
                },
                people : [
                    {
                        name : 'ricky',
                        age : 30,
                        sex : 'Female'
                    },{
                        name : 'jack',
                        age : 20,
                        sex : 'Female'
                    }
                ]
            },
            methods : {
                create : function(){
                    this.people.push(this.newPerson);
                    this.newPerson = {name: '', age: 0, sex: 'Male'}
                },
                deletePeo : function(index){//2.x的索引获取和1.x的获取方式有不同
                    this.people.splice(index,1);
                }
            }
        });
    </script>
</body>
</html>